<template>
	<div class="layout">
		<!-- 头部 -->
		<van-nav-bar
			title="传智播客.黑马程序员Vue.js"
			:border="false"
			fixed
			safe-area-inset-top
			:z-index="5"
			placeholder
		/>
		<!-- 页面 -->
		<router-view />
		<!-- 底部 -->
		<van-tabbar route v-model="activeIndex">
			<van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item replace to="/member" icon="user-circle-o">会员</van-tabbar-item>
			<van-tabbar-item replace to="/car" icon="cart-o" :badge="badge">购物车</van-tabbar-item>
			<van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
export default {
	name: 'Layout',
	data() {
		return {
			activeIndex: 0,
			badge: localStorage.getItem('shopcarList')
				? JSON.parse(localStorage.getItem('shopcarList')).length
				: 0
		};
	}
};
</script>

<style scoped lang="less">
/deep/ .van-nav-bar__content {
	background-color: #26a2ff;
}
/deep/ .van-nav-bar__title {
	color: #fff;
}
</style>
